<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="public/lib/axios.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>
  <h1>hello gin</h1>
  <input type="file" accept="image/*" capture="camera" />
  <hr>
  <div id="app">
    <!-- 登录  -->
    <div class="login">
      账号：<input type="text" v-model="loginData.account">
      <br>
      密码：<input type="password" v-model="loginData.password">
      <br>
      <button @click="onLogin">登录</button>
    </div>

    <hr>
    <!-- 注册 -->
    <div class="signin">
      账号：<input type="text" v-model="regninData.account">
      <br>
      昵称：<input type="text" v-model="regninData.nikeName">
      <br>
      密码：<input type="password" v-model="regninData.password">
      <br>
      手机号：<input type="text" v-model="regninData.phone">
      <br>
      性别：
      <select v-model="regninData.gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      <br>
      邮箱：<input type="email" v-model="regninData.email">
      <br>
      <button @click="onRegnin">注册</button>
    </div>
    <hr>
    <!-- goods  -->
    <div class="goods-form">
      商品名称：<input type="text" v-model="goodsData.goodsname">
      <br>
      <button @click="onAddGoods">添加</button>
    </div>
    <hr>
    <button @click="onGetUserGoods">获取当前用户下商品</button>
    <br><br>
    <button @click="onGetGoods">获取所有商品</button>

    <!-- vlog  -->
    <div class="goods-form">
      title：<input type="text" v-model="vlogData.title">
      content：<input type="text" v-model="vlogData.content">
      <br>
      <button @click="onAddvlog">添加</button>
    </div>
  </div>
  <script type="module">
    const { createApp, ref, reactive, toRaw } = Vue

    createApp({
      setup() {
        const baseData = () => ({
          account: "",
          nikename: "",
          password: "",
          phone: "",
          gender: "男",
          email: ""
        })
        var token = ref("");
        const userInfo = ref({})
        const loginData = ref({ account: "", password: "" });
        const regninData = reactive(baseData())
        // 商品
        const goodsData = ref({ goodsname: "" })
        // vlog
        const vlogData = ref({ title: "", content: "" })


        const onRegnin = () => {
          let params = toRaw(regninData)
          axios.post("/account/regnin", params).then(res => {
            let { data } = res;
            if (data.code === 1) {
              Object.assign(regninData, baseData())
            }
          })
        }

        const onLogin = () => {
          let params = toRaw(loginData.value);
          axios.post("/account/login", params).then(res => {
            let { data } = res;
            if (data.code === 1) {
              token = data.data;
              onUserInfo();
            }
          })
        }

        const onUserInfo = () => {
          axios.get("/user/info", {
            headers: { 'Authorization': token },
          }).then(res => {
            console.log(res, "获取用户信息")
          })
        }

        const onAddGoods = () => {
          const params = toRaw(goodsData.value);
          axios.post("/goods", params, {
            headers: { 'Authorization': token },
          }).then(res => {
            console.log(res)
          })
        }

        const onGetUserGoods = () => {
          axios.get("/goods", {
            headers: { 'Authorization': token },
          }).then(res => {
            console.log(res, "获取用户下的商品")
          })
        }

        const onGetGoods = () => {
          axios.get("/goods/all", {
            headers: { 'Authorization': token },
          }).then(res => {
            console.log(res, "获取用户下的商品")
          })
        }

        return {
          onRegnin,
          regninData,
          loginData,
          onLogin,
          userInfo,
          goodsData,
          onAddGoods,
          onGetUserGoods,
          onGetGoods,
          vlogData
        }
      }
    }).mount('#app')
  </script>
</body>

</html>